<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
#div1{width:200px;height:200px;background-color: yellow;position: absolute;}
#div2{width:200px;height:200px;background-color: green;position: absolute;}
    </style>
    <script src="../../js-study/js/Drag.js"></script>
    <script>
        window.onload=function(){
            new Drag('div1');
            new LiMitDrag('div2');
        };

//    LiMitDrag继承Drag的属性，方法

          function LiMitDrag(id){
             Drag.call(this,id);//继承属性
          }
          for(var i in Drag.prototype){//继承方法
              LiMitDrag.prototype[i]=Drag.prototype[i];
          }
//只需要修改不一样的
        LiMitDrag.prototype.fnMove=function(ev){//鼠标移动//代码重写
            var oEvent=ev||event;
//                  求oDiv的位置，让oDiv物体跟着鼠标运动，就是让其位置变化
            var l=oEvent.clientX-this.disX;
            var t=oEvent.clientY-this.disY;
            if(l<0){//左边
                l=0;
            }
            else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth){//右边//浏览器的宽度-该盒子的宽度
                l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
            }
            if(t<0){//上边
                t=0;
            }
            else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight){//下边
                t=document.documentElement.clientHeight-this.oDiv.offsetHeight
            }
            this.oDiv.style.left=l+'px';
            this.oDiv.style.top=t+'px';
        };

    </script>
</head>
<body>
<div id="div1">普通拖拽</div>
<div id="div2">限制范围</div>
第一步：需要把所有的函数嵌套全部拿出去；<br>
第二步：将变量拿出去作为全局变量；<br>
第三步：构造函数，并将变量转为属性；<br>
第四步：再将函数变成方法；
</body>
</html>